<template>
  <div>
    <!-- 查询条件 -->
    <el-input v-model="searchQuery" placeholder="输入姓名、工号、电话、角色查询" @keyup.enter="searchUsers" style="width: 200px; margin-bottom: 20px;"></el-input>
    <el-button @click="searchUsers">查询</el-button>

    <!-- 左边树 -->
    <el-tree :data="roleTree" :props="treeProps" @node-click="handleNodeClick" style="width: 200px; float: left;"></el-tree>

    <!-- 右边表格 -->
    <el-table :data="users" style="margin-left: 220px;">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="employeeNumber" label="工号"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="roles" label="角色"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button size="mini" @click="openEditDialog(scope.row)">修改</el-button>
          <el-button size="mini" @click="openAssignRoleDialog(scope.row)">分配角色</el-button>
          <el-button size="mini" @click="copyUser(scope.row)">复制</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 增加用户对话框 -->
    <el-dialog title="添加用户" v-model:visible="addDialogVisible">
      <el-form :model="newUser" :rules="rules" ref="newUserForm" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="newUser.name"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="employeeNumber">
          <el-input v-model="newUser.employeeNumber"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="newUser.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="newUser.password"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="department">
          <el-select v-model="newUser.department" placeholder="请选择部门">
            <el-option v-for="dept in departments" :key="dept.id" :label="dept.name" :value="dept.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-select v-model="newUser.position" placeholder="请选择职位">
            <el-option v-for="position in positions" :key="position.id" :label="position.name" :value="position.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="roles">
          <el-select v-model="newUser.roles" multiple placeholder="请选择角色">
            <el-option v-for="role in roles" :key="role.id" :label="role.name" :value="role.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addUser">添加</el-button>
      </template>
    </el-dialog>

    <!-- 修改用户对话框 -->
    <el-dialog title="修改用户" v-model:visible="editDialogVisible">
      <el-form :model="editUser" :rules="rules" ref="editUserForm" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editUser.name"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="employeeNumber">
          <el-input v-model="editUser.employeeNumber"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="editUser.phone"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="department">
          <el-select v-model="editUser.department" placeholder="请选择部门">
            <el-option v-for="dept in departments" :key="dept.id" :label="dept.name" :value="dept.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-select v-model="editUser.position" placeholder="请选择职位">
            <el-option v-for="position in positions" :key="position.id" :label="position.name" :value="position.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="roles">
          <el-select v-model="editUser.roles" multiple placeholder="请选择角色">
            <el-option v-for="role in roles" :key="role.id" :label="role.name" :value="role.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUser">保存</el-button>
      </template>
    </el-dialog>

    <!-- 分配角色对话框 -->
    <el-dialog title="分配角色" v-model:visible="assignRoleDialogVisible">
      <el-form :model="assignRoleForm" label-width="100px">
        <el-form-item label="角色">
          <el-select v-model="assignRoleForm.roles" multiple placeholder="请选择角色">
            <el-option v-for="role in roles" :key="role.id" :label="role.name" :value="role.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="assignRoleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="assignRoles">分配</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      roleTree: [],
      users: [],
      departments: [],
      positions: [],
      roles: [],
      addDialogVisible: false,
      editDialogVisible: false,
      assignRoleDialogVisible: false,
      newUser: {
        name: '',
        employeeNumber: '',
        phone: '',
        password: '',
        department: '',
        position: '',
        roles: []
      },
      editUser: {},
      assignRoleForm: {
        roles: []
      },
      treeProps: {
        children: 'children',
        label: 'name'
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        employeeNumber: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/, message: '密码必须包含数字、大写和小写字母，且至少6位', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    searchUsers() {
      // 模拟查询用户
      this.users = this.users.filter(user => user.name.includes(this.searchQuery) || user.employeeNumber.includes(this.searchQuery) || user.phone.includes(this.searchQuery));
    },
    handleNodeClick(node) {
      // 根据树节点显示对应的数据
      this.users = this.getUsersByNode(node);
    },
    getUsersByNode(node) {
      // 模拟根据节点获取用户
      return this.users.filter(user => user.department === node.id);
    },
    openAddDialog() {
      this.addDialogVisible = true;
    },
    addUser() {
      this.$refs.newUserForm.validate((valid) => {
        if (valid) {
          this.users.push({ ...this.newUser });
          this.addDialogVisible = false;
          this.$message.success('用户添加成功');
        }
      });
    },
    openEditDialog(user) {
      this.editUser = { ...user };
      this.editDialogVisible = true;
    },
    updateUser() {
      this.$refs.editUserForm.validate((valid) => {
        if (valid) {
          const index = this.users.findIndex(u => u.employeeNumber === this.editUser.employeeNumber);
          if (index !== -1) {
            this.users.splice(index, 1, { ...this.editUser });
            this.editDialogVisible = false;
            this.$message.success('用户更新成功');
          }
        }
      });
    },
    openAssignRoleDialog(user) {
      this.assignRoleForm.user = user;
      this.assignRoleDialogVisible = true;
    },
    assignRoles() {
      const user = this.assignRoleForm.user;
      user.roles = this.assignRoleForm.roles;
      this.assignRoleDialogVisible = false;
      this.$message.success('角色分配成功');
    },
    copyUser(user) {
      this.newUser = { ...user };
      this.addDialogVisible = true;
    },
    deleteUser(user) {
      this.users = this.users.filter(u => u.employeeNumber !== user.employeeNumber);
      this.$message.success('用户删除成功');
    }
  },
  mounted() {
    // 模拟加载用户列表、部门列表、职位列表和角色列表
    this.users = [
      { name: '用户1', employeeNumber: '001', phone: '12345678901', department: '部门1', position: '职位1', roles: ['角色1'] },
      { name: '用户2', employeeNumber: '002', phone: '12345678902', department: '部门1', position: '职位2', roles: ['角色2'] },
      { name: '用户3', employeeNumber: '003', phone: '12345678903', department: '部门2', position: '职位1', roles: ['角色1'] }
    ];
    this.departments = [
      { id: '部门1', name: '部门1' },
      { id: '部门2', name: '部门2' }
    ];
    this.positions = [
      { id: '职位1', name: '职位1' },
      { id: '职位2', name: '职位2' }
    ];
    this.roles = [
      { id: '角色1', name: '角色1' },
      { id: '角色2', name: '角色2' }
    ];
    this.roleTree = [
      {
        id: '部门1',
        name: '部门1',
        children: [
          {
            id: '职位1',
            name: '职位1',
            children: [
              { id: '角色1', name: '角色1' }
            ]
          },
          {
            id: '职位2',
            name: '职位2',
            children: [
              { id: '角色2', name: '角色2' }
            ]
          }
        ]
      },
      {
        id: '部门2',
        name: '部门2',
        children: [
          {
            id: '职位1',
            name: '职位1',
            children: [
              { id: '角色1', name: '角色1' }
            ]
          }
        ]
      }
    ];
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>